import React, { useState, useEffect, useRef } from 'react';
/*
  学习目标：useRef的使用=====》在函数组件中创建ref
  步骤：
     1. 创建ref const timeRef = useRef();
     2. 使用：timeRef.current = XXXX
     3. 
*/
export default function App() {
  // 准备组件的显示与隐藏
  const [isShow, setIsShow] = useState(true);

  return (
    <div>
      {isShow && <Child></Child>}
      <button onClick={() => setIsShow(!isShow)}>点击卸载子组件</button>
    </div>
  );
}

function Child() {
  // 创建函数组件的ref
  const timeRef = useRef();
  // 在子组件中挂载时监听窗口改变事件
  const resizeFn = () => {
    console.log('scollWidth  ----->  ');
  };
  useEffect(() => {
    // window.addEventListener('resize', resizeFn);
    timeRef.current = setInterval(() => {
      console.log(' 定时器触发了 ----->  ');
    }, 100);
    // 卸载时触发
    return () => {
      console.log('卸载时触发');
      // resizeFn.current = timeId
      clearInterval(timeRef.current);
      // window.removeEventListener('resize', resizeFn);
    };
  }, []);
  //   卸载时触发
  //   useEffect(() => {

  //   }, []);
  return <div>我是子组件</div>;
}
